<div class="action-button-demo">
  <h4>Basic:</h4>
  <hi-action-button [buttonText]="'Dropdown action'" [actions]="actions"
                    [type]="'primary'"
                    (actionClick)="onActionClick($event)"></hi-action-button>
  <hi-action-button #actionButton="actionButton" [buttonText]="'Dropup action'" direction="up" [actions]="actions"
                    type="warning"
                    (actionClick)="onActionClick($event)"></hi-action-button>

  <hi-action-button [buttonText]="'Default Action'" type="default" [actions]="actions"
                    (actionClick)="onActionClick($event)"></hi-action-button>

  <hi-action-button [buttonText]="'Disabled dropdown action'" type="danger" [actions]="actions"
                    [disabled]="disabledActionOpen" (actionClick)="onActionClick($event)"></hi-action-button>


  <h4>Customise button:</h4>

  <ng-template #buttonTemplate let-action>
    <i class="icmn-pen" (click)="action.toggle($event)"></i>
  </ng-template>

  <hi-action-button [buttonText]="'Default Action'" type="default" [actions]="actions"
                    (actionClick)="onActionClick($event)" [buttonTemplate]="buttonTemplate"></hi-action-button>


  <hr>
  <div>
    <button class="btn btn-success" (click)="actionButton.toggle($event)">Toggle 4th Dropup
      action
    </button>

    <button class="btn btn-success" (click)="disabledActionOpen = !disabledActionOpen;">Toggle Dropup action disabled
    </button>
  </div>
</div>
